<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户画像</title>
    <script src="js/jquery-3.6.3.min.js"></script>
    <script src="js/echarts.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/bootstrap-theme.css">
    <script src="js/bootstrap.js"></script>
    <script>

        $(function (){
            let userid = window.localStorage.getItem("user")
            let user = null

            if(userid!="guest"){
                $.ajax({
                        url: "/user/infoForAdmin",
                        type: "post",
                        data: JSON.stringify({
                            "id": userid
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {
                                user = r.data
                                $("#id").text(user.id.slice(1))
                                $("#name").text(user.name)
                                $("#email").text(user.email)
                                $("#address").text(user.address)
                                $("#sex").text(user.sex)
                                $("#lastLogin").text(user.lastlogin)
                                $("#infoBox").show()
                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            function analyse(stat){
                $.ajax({
                        url: "/order/analyzeRecord",
                        type: "post",
                        data: JSON.stringify({
                            "userid": userid,
                            "stat": stat
                        }),
                        contentType: "application/json",
                        dataType: "json",
                        success: function (data) {
                            let r = data;
                            if (r.code === 1) {
                                let orders = r.data
                                var chartDom = document.getElementById(stat==0?'recordContainer':'orderContainer');
                                var myChart = echarts.init(chartDom);

                                let pieData = []

                                for(i=0;i<orders.length;i++){
                                    pieData.push({
                                        gid: orders[i].goodsid,
                                        name: orders[i].name,
                                        value: stat==0?(orders[i].count/60.0).toFixed(2):(orders[i].count*orders[i].price/100.0).toFixed(2)
                                    })
                                }

                                var option = {
                                    title: {
                                        text: stat==0?'近一个月浏览占比':'购买占比',
                                    },
                                    // 鼠标移入的提示
                                    tooltip: {
                                        // {a} 是 series[0].name ，系列名称
                                        // {b} 是 series[0].data.name ，每一项的名称
                                        // {c} 是 数值
                                        // {d} 是 百分比
                                        formatter: function(arg) {
                                            return arg.data.name+ '<br>id:'+ arg.data.gid +'<br> <strong>'+arg.data.value+'</strong>'
                                                +(stat==0?'分钟':'元') +' 占比'+arg.percent+'%'
                                        }
                                    },
                                    position(point, params, dom, rect, size) {
                                        // 鼠标坐标和提示框位置的参考坐标系是：以外层div的左上角那一点为原点，x轴向右，y轴向下
                                        var x = 0; // x坐标位置
                                        var y = 0; // y坐标位置

                                        var pointX = point[0];
                                        var pointY = point[1];

                                        // 提示框大小
                                        var boxWidth = size.contentSize[0];
                                        var boxHeight = size.contentSize[1];

                                        // boxWidth > pointX 说明鼠标左边放不下提示框
                                        if (boxWidth > pointX) {
                                            x = 5;
                                        } else { // 左边放的下
                                            x = pointX - boxWidth;
                                        }

                                        // boxHeight > pointY 说明鼠标上边放不下提示框
                                        if (boxHeight > pointY) {
                                            y = 5;
                                        } else { // 上边放得下
                                            y = pointY - boxHeight;
                                        }
                                        return [x, y];
                                    },
                                    series: [
                                        {
                                            type: 'pie',
                                            data: pieData
                                        }
                                    ]
                                }

                                option && myChart.setOption(option);

                            } else {
                                alert(r.msg)
                            }
                        }
                    }
                )
            }

            analyse(0)

            if(userid!="guest"){
                $("#infoBox").show()
                analyse(1)
                $("#head").text("用户画像")
            }
            else{
                $("#orderContainer").hide()
                $("#head").text("游客画像")
            }

            $("input").attr("autocomplete", "off")
        })

    </script>
</head>
<body>
    <div class="page-header">
        <h3 id="head"></h3>
    </div>
    <div id="infoBox" class="table-responsive" hidden>
        <table class="table table-bordered table-striped">
            <tr>
                <th>电话</th>
                <td>
                    <label id="id"></label>
                </td>
            </tr>
            <tr>
                <th>姓名</th>
                <td>
                    <label id="name"></label>
                </td>
            </tr>
            <tr>
                <th>性别</th>
                <td>
                    <label id="sex"></label>
                </td>
            </tr>
            <tr>
                <th>email</th>
                <td>
                    <label id="email"></label>
                </td>
            </tr>
            <tr>
                <th>地址</th>
                <td>
                    <label id="address"></label>
                </td>
            </tr>
            <tr>
                <th>上次登录时间</th>
                <td>
                    <label id="lastLogin"></label>
                </td>
            </tr>
        </table>
    </div>
    <div class="row">
        <div class="col-lg-1" id="recordContainer" style="height:300px; width:400px"></div>
        <div class="col-lg-1" id="orderContainer" style="height:300px; width:400px"></div>
    </div>

</body>
</html>